<template>
  <div class="dlIndex">
    <div class="store-publish fw margin-b3">
      <div @click="hidePublish" id="change" class="publish01 divSection bgf fw border-bottom">
        <section class=""><a href="javascript:;" class="aRight"
                             id="gameName"><font>游戏名称</font><label><i></i><em>{{strObject.gameName}}</em></label></a>

        </section>
      </div>
      <transition name="fadeRight">
        <publish-choice v-if="hide" v-on:nameChoice="nameChoice"></publish-choice>
      </transition>


      <div class="publish02 fw border-bottom margin-bottom">
        <div class="publish02a fw f30">
          <span>标题</span><input type="text" maxlength="25" v-model="titleChoice" placeholder="请输入标题" id="title">
        </div>
      </div>
      <div class="publish03 fw border-bottom mt-20">
        <h3 class="f32 border-top">添加商品描述和图片</h3>
        <!--<div v-html="Fudescribe"></div>-->
        <div class="publish03-text fw border-top" v-if="path" id="boxPuth">
          <div v-for="(puthlist,index) in path" class="re-tarea cause describe"
               style="outline: none;overflow-y:scroll;min-height: 0.75rem;">
            <div class="upload-main pt-10" style="position: relative">
              <div>
                <img :src="puthlist"
                     atsrc="KxAcPb4pKP.jpg" style="width: 100%;height: 100%"></div>
              <div class="del-maskss" >
                <img @click="deleteImg(index)" src="../../../assets/images/Icon/bitch-b.png" alt="" class="close-img1">
              </div>

              <div class="publish02 fw border-bottom margin-bottom" style="margin-top: 0.2rem">
                <div class="publish02a fw f30"><span>描述</span><input
                  v-model="ax[index]" type="text" maxlength="25" placeholder="请对图片进行描述"></div>
              </div>
            </div>

          </div>


        </div>

        <!-- 上传图片 -->
        <div class="w-100 pl-30 clearfix sc_box">
          <uploadComponents
            :server="upload.server"
            :api="upload.api"
            :params="upload.params"
            :success="upload.success"
            :file.sync="upload.file"
            :crop="upload.crop"
            :width="upload.width"
            :height="upload.height"
            :ok="upload.ok"
            :cancel="upload.cancel"
            :storeindex="storeindex"
            ref="upload"
          >
          </uploadComponents>
        </div>


      </div>
      <div class="publish04 fw border-bottom border-top px-30 bg-fff my-20">
        <div class="publish04 fw f30 lh100">
          <span class="color-000">商品专属服务QQ配置</span><input class="txQQ" v-model="QQchoice" maxlength="12"
                                                          type="tel" placeholder="请输入服务号">
        </div>
      </div>
      <div>

      </div>

      <div>

      </div>
      <!-- 固定底部 -->
      <div class="fixed-button border-top margin-top fixed-bottom">
        <div class="redbutton">
          <a id="publish" @click="publishStore">确定发布</a>
        </div>
      </div>

      <!--弹出框-->
      <div class="dialog-box hide" id="dialog_show2">
        <div class="dialog-main">
          <div class="dialog-body" id="errortx1"></div>
          <div class="dialog-foot">
            <a class="dialog_close " href="javascript:void(0);" id="Ise1">知道了</a>
          </div>
        </div>
      </div>

    </div>

  </div>


</template>

<script>
  import {MessageBox} from 'mint-ui';
  import DlPublishChoice from "./DlPublishChoice.vue"
  import uploadComponents from './uploadPublish.vue';
  export default {
    name: 'DlMyStorePublish',
    data () {
      return {
        hide: false,
        tupianModel: "",
        path: [],
        ax: [],
        htmls: '',
        storeindex:-1,
        Fudescribe:'',
        upload: {
          server: "/api/mobile-fullauto-service/rs/upload/uploadimage",
          api: "",
          preview: true,
          crop: false,
          width: 400,
          height: 400,
          cancel: "取消",
          ok: "裁剪",
          success: (data) => {
            this.path.push(data.path);
            console.log("------", this.path);


//            this.describes = '<div class="upload-main pt-10" id="jA7xYAwnijjpg">' +
//              '<div>' +
//              '<img src='+this.path[0]+' atsrc="jA7xYAwnij.jpg"></div>' +
//              '<div>'+this.ax[0]+'<div class="upload-main pt-10" id="BQ8tpyRJC6jpg">' +
//              '<div>' +
//              '<img src='+this.path[1]+' atsrc="BQ8tpyRJC6.jpg"></div><div>'+this.ax[0]+'</div>' +
//              '<div class="focus_div" contenteditable="true" tabindex="0"></div>' +
//              '</div>' +
//              '</div><div class="focus_div" contenteditable="true" tabindex="0">' +
//              '</div>' +
//              '</div>'
          }
        },
        titleChoice: '',
        QQchoice: '',
        strObject: {
          gameName: "请选择",
          gameId: "",


        },
      }
    },

    methods: {
      deleteImg(index){
//        this.path.splice(index,1)
        this.storeindex = index
      },
      hidePublish(){
        this.hide = true
      },
      nameChoice(str){
        this.strObject = str
        console.log(this.strObject)
      },
      publishStore(){

        this.path.forEach((item, index) => {
          if (this.ax[index] === "" || this.ax[index] == undefined || this.ax[index] == "undefined") {
            this.ax[index] = ""
          }
          this.htmls += '<div class="re-tarea cause describe"style="outline: none;overflow-y:scroll;min-height: 0.75rem;"><div class="upload-main pt-10"> <div> <img src=' + item + ' atsrc="KxAcPb4pKP.jpg" style="width: 100%;height: 100%"></div>' +
            '<div class="publish02 fw border-bottom margin-bottom" style="margin-top: 0.2rem"> <div class="publish02a fw f30"><span>描述:</span>' +
            '<span>' + this.ax[index] + '</span></div> </div> ' +
            '</div>' +
            ' </div>'
        })


//        this.htmlPublish =
        var qqReg = /^[1-9]\d{4,10}$/;
        if (this.strObject.gameName == "请选择") {
          MessageBox('提示', '请选择游戏名称');
          return false
        }
        if (this.titleChoice === "") {
          MessageBox('提示', '标题不能为空');
          return false
        }
        if (this.htmls === "") {
          MessageBox('提示', '商品图片不能为空');
          return false
        }
        if (this.QQchoice === "") {
          MessageBox('提示', 'QQ号不能为空');
          return false
        }
        if (!qqReg.test(this.QQchoice)) {
          MessageBox('提示', 'QQ格式错误');
          return false
        }
        if(this.$route.query.goodsId){
          this.$http.post(this.$CONSTANTS.APIStore + "storeLeveling/compile", {
            describe: this.htmls,
            gameId: this.strObject.gameId,
            gameName: this.strObject.gameName,
            goodsQQ: this.QQchoice,
            id:this.$route.query.goodsId,
            imageUrlList: this.path[0],
            title: this.titleChoice,
          }).then((res) => {
            console.log(res)
            MessageBox.alert("发布成功，请耐心等待客服审核").then(
              action => {
                this.$router.push({
                  name: 'DlMyStore',
                  params: {state: 'publish'}
                })
              }
            );
          })
        }else{
          this.$http.post(this.$CONSTANTS.APIStore + "storeLeveling/add", {
            describe: this.htmls,
            gameId: this.strObject.gameId,
            gameName: this.strObject.gameName,
            goodsQQ: this.QQchoice,
            imageUrlList: this.path[0],
            title: this.titleChoice,
          }).then((res) => {
            console.log(res)
            MessageBox.alert("发布成功，请耐心等待客服审核").then(
              action => {
                this.$router.push({
                  name: 'DlMyStore',
                  params: {state: 'publish'}
                })
              }
            );
          })
        }

      }
    },
    components: {
      "publish-choice": DlPublishChoice,
      uploadComponents,
    },
    mounted(){
      if(this.$route.query.goodsId){
        this.$http.get(this.$CONSTANTS.APIStore + 'storeLeveling/getDetail',
          {params:{id: this.$route.query.goodsId}}
          ).then((res)=>{

          if(res.body.responseStatus.code=="00"){
            console.log(res.body.result)
            let object = res.body.result
            this.strObject = {
              gameName: res.body.result.gameName,
              gameId: res.body.result.gameId,
            }
            this.titleChoice = res.body.result.title
            this.QQchoice = res.body.result.goodsQQ
//            console.log(res.body.result.describe)
//            console.log(res.body.result.describe.split('<img src='))
            var str = res.body.result.describe.split('<img src=')
            var attr1 = []
            var attr2 = []
            str.forEach((item,index)=>{

              if(index==0){

              }else{
                this.$refs.upload.list=[]
                attr2.push(item.replace(/<\/?.+?>/g,"").split('描述:')[1].trimEnd())
                attr1.push(item.split('atsrc')[0].trimEnd())
                console.log('----------',attr2)
                console.log('----------',attr1)
                attr2.forEach((item, index) => {
                  this.ax[index] = item
                })
                this.path.push(item.split('atsrc')[0].trimEnd());
                attr1.forEach((item, index) => {
                  this.$refs.upload.list.push({
                    sImgUrl: item + '?x-oss-process=image/resize,m_fixed,w_112,h_112',
                    bigPicUrl: item
                  });

                })

              }
            })
            this.Fudescribe = res.body.result.describe

          }

        })

      }



      var self = this;
      if(this.$route.query.goodsId){
        self.$bus.emit('headerText', '编辑');
      }else{
        self.$bus.emit('headerText', '发布');
      }

    },
    destroyed(){
      var self = this;
      self.$bus.emit('headerText', '');
    }
  }
</script>


<style scoped>
  .dlIndex {
    margin-top: .96rem;
  }

  /*.fade_sx-enter-active {*/
  /*transition: all .5s ease;*/
  /*}*/
  /*.fade_sx-leave-active {*/
  /*transition: all .5s ease;*/
  /*}*/

  /*.fade_sx-enter, .fade_sx-leave-active {*/

  /*transform: translateX(100%);*/
  /*}*/

  .fadeRight-enter-active {
    animation: fadeInRight 0.5s;
    -webkit-animation: fadeInRight 0.5s;
  }

  .fadeRight-leave-active {
    animation: fadeOutRight 0.5s;
    -webkit-animation: fadeOutRight 0.5s;
  }
  .del-maskss{
    width: 100%;
    height: 0.6rem;
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 0rem;
  }
  .del-maskss img{
    width: 0.42rem;
    height: 0.42rem;
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
  }


</style>
